<template>
  <div class="welcome-container">
    <!-- <h1>欢迎来到首页</h1> -->
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>最近图片</span>
      </div>
      <div class="mainer">
        <el-carousel indicator-position="outside">
          <el-carousel-item v-for="item in picsUrl" :key="item.src">
            <img :src="item.src" alt="" style="width:100%;height:100%" />
          </el-carousel-item>
        </el-carousel>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 这里图片路径一定要require，不然无法加载
      picsUrl: [{ src: require('@/assets/img/bg1.jpg') }, { src: require('@/assets/img/bg2.jpg') }, { src: require('@/assets/img/bg3.jpg') }]
    }
  }
}
</script>

<style lang="less" scoped>
.welcome-container {
  height: 100%;
}
/deep/ .el-card__body {
  height: 410px;
  .mainer {
    height: 100%;
    .el-carousel {
      height: 100%;
      // background-color: pink;
      .el-carousel__container {
        height: 93%;
      }
    }
  }
}
// /deep/ .el-carousel-item {
//   height: 100%;
// }
.box-card {
  width: 100%;
  height: 100%;
}
</style>
